<!doctype html>
<html>
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
  <title>郴州气象</title>
  <style>
    .amap-logo{z-index:-160;}
    @media screen and (min-width: 600px) {
      html, body {
        margin: 0;
        height: 100%;
        background-color: #FFF;
        width: 600px;
      }
      #container {
        margin: auto auto;
        height: 100%;
        background-color: #efefef;
        width: 600px;
      }
      #container #main{
        margin:0;
        height: 100%;
      }
      .loading{
        position: absolute;
        display: block;
        margin-top: -20px;
        margin-left: -20px;
        text-align: center;
        top: 20px;
        left:20px;
        width: 600px;
        height:100%;
        background-color: rgba(255,255,0,0);
        background-repeat:no-repeat;
        background-attachment:fixed;
        background-position:center;
        z-index:10000;
        display:non1e;
      }
      .loading_pic{
        background-image:url('./images/load.gif');
        background-repeat:no-repeat;
        background-attachment:fixed;
        background-position:center;
      }
      .menu{
        bottom: 0px;
        position: absolute;
        width: 600px;
        margin: 0px;
        padding: 0px;
        background-color: #FFF;
        height:40px;
        line-height:40px;
      }
      .menu ul.m1{
        margin: 10px 0px;
        padding: 0px;
      }
      .menu ul.m1 li.m11{
        float:left;
        list-style:none;
        width: 29%;
        height:20px;
        line-height:20px;
        text-align:center;
        border-right: 1px solid lightgray;
        font-size: 14px;
      }
      .menu ul.m1 li.m12{
        float:left;
        list-style:none;
        width: 12%;
        height:20px;
        line-height:20px;
        text-align:center;
        font-size: 14px;
      }
      .menu ul.m1 li.m12 img {
        width: 25px;
      }
      .pop{
        display:none;
        position: absolute;
        bottom: 41px;
        background-color: #FFF;
        border: 0px solid lightgray;
        z-index:10001;
        margin-left:3px;
      }
      .pop ul.m2{
        margin: 0px;
        padding: 0px;
      }
      .pop ul.m2 li{
        list-style:none;
        width: 6rem;
        height: 40px;
        line-height: 40px;
        padding : 0px 10px 0px 5px;
        text-align:left;
        border-bottom: 1px solid lightgray;
      }
      .win{
        position: absolute;
        display: block;
        margin-bottom: 41px;
        padding-top: 41px;
        text-align: left;
        bottom: 0px;
        left:0px;
        width:600px;
        height:100%;
        background-color: rgba(255,255,255,1);
        background-repeat:no-repeat;
        background-attachment:fixed;
        background-position:center;
        z-index:999;
        display:none;
      }
      .win .blank{
        height: 41px;
      }
      .win .content{
        padding:5px;
      }
      .win .content .tit{
        height: 30px;
        line-height: 30px;
        text-align: center;
        font-size:14px;
        font-weight: bold;
        color:blue;
      }
      table.tab {
        border-collapse: collapse;
        border: 1px solid lightgray;
        width: 100%;
        color: #000;
        font-size: 14px;
      }

      table tr {
        border: 1px solid lightgray;
      }

      table.tab tr td,table.tab tr th {
        text-align: center;
        line-height:35px;
        width: 33%;
      }
      table.cont{
        height: 400px;
        width: 99%;
        border: 0px;
      }
      table.cont td{
        width: 110px;
      }
      table.total {
        border-collapse: inherit;
        border: 0px;
      }
      table.total td, table.total th{
        width: 20% !important;
      }
      table.total th{
        background-color: #ffb300;
      }
      table.total td{
        background-color: #f5e3e3;
      }
      .toolbar{
        position: absolute;
        display: block;
        text-align: right;
        top: 10px;
        left: 520px;
        width: 70px;
        height:23px;
        font-size:14px;
        background-color: rgba(255,255,255,0);
        background-repeat:no-repeat;
        background-attachment:fixed;
        background-position:center;
        z-index:990;
      }
      .toolbar a {
        text-decoration:none;
        color: green;
        font-weight: bold;
      }
    }
    @media screen and (max-width: 599px) {
      html, body, #container {
        margin:0;
        height: 100%;
        background-color: #efefef;
      }
      html, body, #container #main{
        margin:0;
        height: 100%;
      }
      .loading{
        position: absolute;
        display: block;
        margin-top: -20px;
        margin-left: -20px;
        text-align: center;
        top: 20px;
        left:20px;
        width:100%;
        height:100%;
        background-color: rgba(255,255,255,0);
        background-repeat:no-repeat;
        background-attachment:fixed;
        background-position:center;
        z-index:10000;
        display:none;
      }
      .loading_pic{
        background-image:url('./images/load.gif');
        background-repeat:no-repeat;
        background-attachment:fixed;
        background-position:center;
      }
      .menu{
        bottom: 0px;
        position: absolute;
        width: 100%;
        margin: 0px;
        padding: 0px;
        background-color: #FFF;
        height:40px;
        line-height:40px;
      }
      .menu ul.m1{
        margin: 10px 0px;
        padding: 0px;
      }
      .menu ul.m1 li.m11{
        float:left;
        list-style:none;
        width: 29%;
        height:20px;
        line-height:20px;
        text-align:center;
        border-right: 1px solid lightgray;
        font-size: 14px;
      }
      .menu ul.m1 li.m12{
        float:left;
        list-style:none;
        width: 12%;
        height:20px;
        line-height:20px;
        text-align:center;
        font-size: 14px;
      }
      .menu ul.m1 li.m12 img {
        width: 25px;
      }
      .pop{
        display:none;
        position: absolute;
        bottom: 41px;
        background-color: #FFF;
        border: 1px solid #Fefefe;
        box-shadow: #636351 2px 1px 5px 0px;;
        z-index:10001;
        margin-left:3px;
      }
      .pop ul.m2{
        margin: 0px;
        padding: 0px;
      }
      .pop ul.m2 li{
        list-style:none;
        width: 6rem;
        height: 40px;
        line-height: 40px;
        padding : 0px 10px 0px 5px;
        text-align:left;
        border-bottom: 1px solid lightgray;
      }
      .win{
        position: absolute;
        display: block;
        margin-bottom: 41px;
        padding-top: 41px;
        text-align: left;
        bottom: 0px;
        left:0px;
        width:100%;
        height:100%;
        background-color: rgba(255,255,255,1);
        background-repeat:no-repeat;
        background-attachment:fixed;
        background-position:center;
        z-index:999;
        display:none;
      }
      .win .blank{
        height: 41px;
      }
      .win .content{
        padding:5px;
      }
      .win .content .tit{
        height: 30px;
        line-height: 30px;
        text-align: center;
        font-size:14px;
        font-weight: bold;
        color:blue;
      }
      table.tab {
        border-collapse: collapse;
        border: 1px solid lightgray;
        width: 100%;
        color: #000;
        font-size: 14px;
      }

      table tr {
        border: 1px solid lightgray;
      }

      table.tab tr td,table.tab tr th {
        text-align: center;
        line-height:35px;
        width: 33%;
      }
      table.cont{
        height: 400px;
        width: 99%;
        border: 0px;
      }
      table.cont td{
        width: 110px;
      }
      table.total {
        border-collapse: inherit;
        border: 0px;
      }
      table.total td, table.total th{
        width: 20% !important;
      }
      table.total th{
        background-color: #ffb300;
      }
      table.total td{
        background-color: #f5e3e3;
      }
      .toolbar{
        position: absolute;
        display: block;
        text-align: right;
        top: 10px;
        right: 10px;
        width: 70px;
        height:23px;
        font-size:14px;
        background-color: rgba(255,255,255,0);
        background-repeat:no-repeat;
        background-attachment:fixed;
        background-position:center;
        z-index:990;
      }
      .toolbar a {
        text-decoration:none;
        color: green;
        font-weight: bold;
      }
    }
  </style>
</head>
<body>
<div id="container">
  <div class="main" id="main"></div>
  <div class="menu">
    <ul class="m1">
      <li class="m11">
        <span>地图</span>
        <div class="pop">
          <ul class="m2">
            <li data-type="map" data-tag="map">地图</li>
            <li data-type="map" data-tag="tableWin">表格</li>
            <li data-type="map" data-tag="totalWin">统计</li>
          </ul>
        </div>
      </li>
      <li class="m11">
        <span>全郴州</span>
        <div class="pop">
          <ul class="m2">
            <li data-type="area" data-tag="431000">全郴州</li>
            <li data-type="area" data-tag="431002">北湖区</li>
            <li data-type="area" data-tag="431003">苏仙区</li>
            <li data-type="area" data-tag="431021">桂阳县</li>
            <li data-type="area" data-tag="431022">宜章县</li>
            <li data-type="area" data-tag="431023">永兴县</li>
            <li data-type="area" data-tag="431024">嘉禾县</li>
            <li data-type="area" data-tag="431025">临武县</li>
            <li data-type="area" data-tag="431026">汝城县</li>
            <li data-type="area" data-tag="431027">桂东县</li>
            <li data-type="area" data-tag="431028">安仁县</li>
            <li data-type="area" data-tag="431081">资兴市</li>
          </ul>
        </div>
      </li>
      <li class="m11">
        <span>1小时雨量</span>
        <div class="pop">
          <ul class="m2">
            <li data-type="hour" data-tag="1">1小时雨量</li>
            <li data-type="hour" data-tag="3">3小时雨量</li>
            <li data-type="hour" data-tag="6">6小时雨量</li>
            <li data-type="hour" data-tag="12">12小时雨量</li>
            <li data-type="hour" data-tag="24">24小时雨量</li>
          </ul>
        </div>
      </li>
      <li class="m12">
        <span><img src="./images/refresh.png"></span>
      </li>
    </ul>
  </div>
  <div class="loading" id="loadingWin"></div>
  <div class="win" id="tableWin">
    <div class="blank"></div>
    <div class="content">
      <div class="tit">9月30日13点 到 9月30日14点 降雨量</div>
      <table class="tab">
        <tr>
          <th>市县区名</th>
          <th>区域站名</th>
          <th>雨量(mm)</th>
        </tr>
      </table>
      <table class="tab cont">
        <tr>
          <td>安仁1</td>
          <td>啊啊啊</td>
          <td>0.2</td>
        </tr>
      </table>
    </div>
  </div>
  <div class="win" id="totalWin">
    <div class="blank"></div>
    <div class="content">
      <div class="tit">统计显示</div>
      <table class="tab total">
        <tr>
          <th>最大降水</th>
          <td colspan="3" id="maxTd">区域站名 65.6</td>
          <th id="totalCountTd">共37站</th>
        </tr>
        <tr>
          <th>0.1 - 9.9</th>
          <th>10 - 24.9</th>
          <th>25 - 49.9</th>
          <th>50 - 99.9</th>
          <th>≥100</th>
        </tr>
        <tr>
          <td id="gte1">1</td>
          <td id="gte10">10</td>
          <td id="gte25">25</td>
          <td id="gte50">50</td>
          <td id="gte100">100</td>
        </tr>
      </table>
      <div class="caption">
      根据最新自动气象站监测，<br>
      8日08时-9日08时，总面雨量为86.3毫米，<br>
      ≥0.1mm的站数为10个;<br>
      ≥10.0mm的站数为0个;<br>
      ≥25.0mm的站数为0个;<br>
      ≥50.0mm的站数为0个;<br>
      ≥100.0mm的站数为0个;<br>
      ＞200mm的站数为0个;<br>
      最大累积降水出现在安仁县灵官镇豪田村为114.1毫米，<br>
      最大小时雨强出现在安仁县永乐江镇清溪清路为51.4毫米。
      </div>
    </div>
  </div>
  <div class="toolbar">
    <a href="#" data-tag="1" id="showNameBtn">显示区站名</a>
  </div>
</div>
<script src="https://webapi.amap.com/maps?v=1.4.15&key=beaa3b8b537e2baf9003ec089fae2db2&plugin=AMap.MarkerClusterer"></script>
<script src="https://webapi.amap.com/ui/1.0/main.js?v=1.0.11"></script>
<script type="text/javascript" src="./js/jquery-3.3.1.min.js"></script>
<script src="./js/smooth-scrollbar.js"></script>
<script src="./js/areasInfo.js"></script>
<script src="./js/rainMarker.js"></script>
<script>
//对Date的扩展，将 Date 转化为指定格式的String
//月(M)、日(d)、小时(h)、分(m)、秒(s)、季度(q) 可以用 1-2 个占位符，
//年(y)可以用 1-4 个占位符，毫秒(S)只能用 1 个占位符(是 1-3 位的数字)
//例子：
//(new Date()).Format("yyyy-MM-dd hh:mm:ss.S") ==> 2006-07-02 08:09:04.423
//(new Date()).Format("yyyy-M-d h:m:s.S") ==> 2006-7-2 8:9:4.18
Date.prototype.format = function (fmt) {
var o = {
  "M+": this.getMonth() + 1, // 月份
  "d+": this.getDate(), // 日
  "h+": this.getHours(), // 小时
  "m+": this.getMinutes(), // 分
  "s+": this.getSeconds(), // 秒
  "q+": Math.floor((this.getMonth() + 3) / 3), // 季度
  "S": this.getMilliseconds() // 毫秒
};
if (/(y+)/.test(fmt)) fmt = fmt.replace(RegExp.$1, (this.getFullYear() + "").substr(4 - RegExp.$1.length));
for (var k in o)
if (new RegExp("(" + k + ")").test(fmt)) fmt = fmt.replace(RegExp.$1, (RegExp.$1.length == 1) ? (o[k]) : (("00" + o[k]).substr(("" + o[k]).length)));
return fmt;
}
var host = document.domain; //'222.242.155.42'; //
var serverUrl = 'http://'+host+':12306/monk';
function ajax(opts){
  $.ajax({
    url: opts.url.indexOf("http://") == -1 ? (serverUrl + opts.url) : opts.url,
    contentType : opts.contentType || 'application/x-www-form-urlencoded',
    data : null != opts.contentType && opts.contentType == 'application/json' ? JSON.stringify(opts.data) : opts.data,
    type: opts.type || 'post',
    dataType: opts.dataType || 'json',
    beforeSend: function(xhr){
      showLoading(1);
      if(opts.beforeSend)
        opts.beforeSend(xhr);
    },
    complete: function(xhr, ts){
      hideLoading();
      if(opts.complete)
        opts.complete(xhr, ts);
    },
    success: function(res){
      if(res.code == 0){
        opts.success(res.data);
      }else{
        alert(res.msg);
      }
    },
    error: function(a,b,c){
      alert(b)
    }
  });
}
function showLoading(pic){
  if(pic){
    $("#loadingWin").addClass("loading_pic");
  }else{
    $("#loadingWin").removeClass("loading_pic");
  }
  $("#loadingWin").show();
}
function hideLoading(){
  $("#loadingWin").hide();
}
function addPolygon(areaInfo){
  var polygon = new AMap.Polygon({
    path: eval(areaInfo.points),
    strokeColor: '#555',
    strokeWeight: 1,
    fillColor: areaInfo.color,
    fillOpacity: 0,
    extData: areaInfo
  });
  areasPolygon.push(polygon);
  map.add(polygon);
  polygon.on("change", function(){
   map.setZoom(8);
});
};

var map = new AMap.Map('main', {
  resizeEnable: true,
  zooms: [1, 18],
  mapStyle: 'amap://styles/d08a25f37661a917ceca37fc7ab4f24f', //'amap://styles/darkblue',
  features: ['bg', 'road', 'building', 'point'],
  showLabel: true
});

map.on("complete", function(){
   map.setZoom(8);
});
map.on("zoomchange", function(){
  viewMarkers();
})
var areasPolygon=[];
function mapArea(areaCode){
  var areas = areaInfos;
  if(areaCode && areaCode != '431000'){
    areas = [];
    for(var i = 0; i < areaInfos.length; i ++){
      var areaInfo = areaInfos[i];
      if(areaInfo.areaName == areaNames[areaCode]){
        map.setCity(areaInfo.areaName);
        setTimeout(function(){
          map.setZoom(9);
        }, 500);
        areas.push(areaInfo);
        break;
      }
    }
  }else{
    map.setCity("郴州");
    setTimeout(function(){
      map.setZoom(8);
    }, 500);
  }
  if(null != areasPolygon){
    map.remove(areasPolygon);
  }
  areas.forEach(function(areaInfo){
    addPolygon(areaInfo);
  });
}
mapArea();
var markers=[];
var liang={};
var hourData;
var chooseHour = 1;
var viewName = false;
var currTime;
var currCity;
function loadData(){
  var endTime = (new Date()).format("yyyy-MM-dd hh:00:00");
  if(endTime == currTime){
    //return;
  }
  currTime = endTime;
  //重置
  
  var params = {
    "areaIds": 431000,
    "endTime": endTime
  };
  ajax({
    url: '/api/cimiss/data/areas/for/hour',
    contentType: 'application/json',
    data: params,
    success: function(data){
      items = data.items;
      hourData = data;
      map.remove(markers);
      markers=[];
      liang={};
      if(items.length > 0){
        items.forEach(function(item){
          var yu = liang[item.areaCode];
          if(yu == null){
            yu = new Array();
            liang[item.areaCode] = yu;
          }
          yu.push({'name': item.stationName, 'pre': item.pre.toFixed(1), 'pre1h': item.pre1h.toFixed(1), 'pre3h': item.pre3h.toFixed(1), 'pre6h': item.pre6h.toFixed(1), 'pre12h': item.pre12h.toFixed(1), 'pre24h': item.pre24h.toFixed(1)});
          var marker = new RainMarker({
            lng: item.lng,
            lat: item.lat,
            text: {
              value: "<div class='stationDataClass' data-pre1h='"+item.pre1h.toFixed(1)+"' data-pre3h='"+item.pre3h.toFixed(1)+"' data-pre6h='"+item.pre6h.toFixed(1)+"' data-pre12h='"+item.pre12h.toFixed(1)+"' data-pre24h='"+item.pre24h.toFixed(1)+"'><label>" + (item.pre1h.toFixed(1)) + "</label><span>"+item.stationName+"</span></div>",
              color: 'green',
              size: '20px',
              weight: '400',
            },
            point: {
              color: 'green',
              radius: 4,
              overColor: '#095c09'
            },
            click: function(e){
              console.log(e)
            }
          });
          marker.data = item;
          markers.push(marker);
        });
        viewMarkers();
      }else{
        alert("时间段内没有降水量");
      }
    }
  });
}

function viewMarkers(){
  var mks = markers;
  if(! mks || mks.length == 0){
    return;
  }
  buildData();
  buildDataTotal();
  map.remove(mks);
  if(currCity && currCity != '431000'){
    mks = [];
    markers.forEach(function(marker){
      var item = marker.data;
      if(item.areaCode == currCity){
        mks.push(marker);
      }
    });
  }
  
  if(! mks || mks.length == 0){
    return;
  }
  var zoom = map.getZoom();
  var z = 7
  if(zoom <= z){
    return;
  }
  var temp = [];
  var jl = 0;
  if(!currCity || currCity == '431000'){
    switch(zoom){
    case z + 1:
      jl = 30000;
      break;
    case z + 2: 
      jl = 20000;
      break;
    case z + 3:
      jl = 10000;
      break;
    default :
      jl = 1;
    }
  }
  var h = chooseHour;
  
  mks.forEach(function(marker){
    var item = marker.data;
    var val = item['pre'+h+'h'];
    if(val > 0){
      var html = "<div class='stationDataClass' data-pre='"+item.pre.toFixed(1)+"'><label>" + (val.toFixed(1)) + "</label><span style='white-space: nowrap;display:"+(viewName?'inline-block':'none')+"'>"+item.stationName+"</span></div>";
      
      html = "<div class='stationDataClass' data-pre='"+item.pre.toFixed(1)+"' data-pre1h='"+item.pre1h.toFixed(1)+"' data-pre3h='"+item.pre3h.toFixed(1)+"' data-pre6h='"+item.pre6h.toFixed(1)+"' data-pre12h='"+item.pre12h.toFixed(1)+"' data-pre24h='"+item.pre24h.toFixed(1)+"'><label>" + (val.toFixed(1)) + "</label><span style='white-space: nowrap;display:"+(viewName?'inline-block':'none')+"'>"+item.stationName+"</span></div>";
      
      var color = item['color'+h+'h'];
      
      marker.setIconLabel({
        innerHTML : html,
        style : {
          color : color
        }
      })
      if(temp.length == 0){
        map.add(marker);
        temp.push(marker)
      }else{
        for(var o in temp){
          var m = temp[o];
          var ll = m.getPosition().distance(marker.getPosition());
          if(ll > jl){
            map.add(marker);
            temp.push(marker)
            break;
          }
        }
      }
    }
  });
}
function buildData(){
  var mks = markers;
  if(! mks || mks.length == 0){
    return;
  }
  var cityName = "全郴州";
  if(currCity && currCity != '431000'){
    mks = [];
    cityName = areaNames[currCity];
    markers.forEach(function(marker){
      var item = marker.data;
      if(item.areaCode == currCity){
        mks.push(marker);
      }
    });
  }
  if(! mks || mks.length == 0){
    return;
  }
  
  mks.sort(function(a, b){
    var vala = a.data['pre'+chooseHour+'h'];
    var valb = b.data['pre'+chooseHour+'h'];
    return valb - vala;
  });
  var html = "";
  mks.forEach(function(marker){
    var item = marker.data;
    var val = item['pre'+chooseHour+'h'];
    if(val > 0){
      html += '<tr><td>'+item.cnty+'</td><td>'+item.stationName+'</td><td>'+val.toFixed(2)+'</td></tr>';
    }
  });
  $("#tableWin div.tit").text(cityName + " 过去" + chooseHour + "小时雨量")
  Scrollbar.destroy(document.querySelector('.cont'));
  $("#tableWin table.cont").html(html);
  var fw = $(".tab:first").width();
  $(".cont").width(fw + 1);
  $(".cont td").width((fw+1) / 3);
  var wh = $(".win").height();
  $(".cont").height(wh - 77 - 40);
  Scrollbar.init(document.querySelector('.cont'));
}

function buildDataTotal(){
  var cityName = "全郴州";
  var li = liang;
  if(currCity && currCity != '431000'){
    cityName = areaNames[currCity];
    if(liang[currCity]){
      li = {currCity : liang[currCity]};
    }else{
      li = {};
    }
  }
  $("table.total #maxTd").text("无");
  $("table.total #gte1").text("0站" );
  $("table.total #gte10").text("0站" );
  $("table.total #gte25").text("0站" );
  $("table.total #gte50").text("0站" );
  $("table.total #gte100").text("0站" );
  var totalMian = 0, gte1 = 0, gte10 = 0, gte25 = 0, gte50 = 0, gte100 = 0, gte200 = 0, maxName = "", maxValue = 0, maxHourName = "", maxHourValue = 0, totalCount = 0;
  for(var areaCode in li){
    var count = 0, sum = 0;
    li[areaCode].sort(function(a, b){
      var av = a['pre'+chooseHour+'h'] * 1;
      var bv = b['pre'+chooseHour+'h'] * 1;
      return bv - av;
    });
    li[areaCode].forEach(function(im){
      var val = im['pre'+chooseHour+'h'] * 1;
      if(val > 0){
        count ++;
        sum += val;
        if(val >= 200){
          gte200 ++;
        }else if(val >= 100){
          gte100 ++;
        }else if(val >= 50){
          gte50 ++;
        }else if(val >= 25){
          gte25 ++;
        }else if(val >= 10){
          gte10 ++;
        }else if(val >= 0.1){
          gte1 ++;
        }
        if(val > maxValue){
          maxValue = val;
          maxName = im.name;
        }
      }
    });
    if(sum > 0){
      var mian = sum / count;
      totalMian += mian;
    }
    totalCount += count;
  }
  maxHourName = hourData["maxNameH"+ chooseHour]
  maxHourValue = hourData["maxValueH"+ chooseHour]
  $("#totalWin div.tit").text(cityName + " 过去" + chooseHour + "小时雨量统计");
  $("table.total #maxTd").text(maxValue > 0 ? (maxName + " " + maxValue) : "无");
  $("table.total #totalCountTd").text("共"+totalCount+"站");
  $("table.total #gte1").text(gte1 + "站" );
  $("table.total #gte10").text(gte10 + "站" );
  $("table.total #gte25").text(gte25 + "站" );
  $("table.total #gte50").text(gte50 + "站" );
  $("table.total #gte100").text(gte100 + "站" );
  var ee = new Date(Date.parse(currTime.replace(/-/g,"/")));
  var bb = new Date(Date.parse(currTime.replace(/-/g,"/")));
  bb.setHours(bb.getHours() - chooseHour);
  var cap = '根据最新自动气象站监测，<br>'+bb.format("d日hh时")+'-'+ee.format("d日hh时")+'，总面雨量为'+totalMian.toFixed(2)+'毫米，<br>≥0.1mm的站数为'+gte1+'个;<br>≥10.0mm的站数为'+gte10+'个;<br>≥25.0mm的站数为'+gte25+'个;<br>≥50.0mm的站数为'+gte50+'个;<br>≥100.0mm的站数为'+gte100+'个;<br>＞200mm的站数为'+gte200+'个;<br>最大累积降水出现在'+maxName+'为'+maxValue+'毫米，<br>最大小时雨强出现在'+maxHourName+'为'+maxHourValue+'毫米。';
  $("#totalWin div.caption").html(cap);
}
$(function(){
  loadData();
  
  $("#showNameBtn").on("tap click", function(){
    var tag = $(this).attr("data-tag");
    if(tag == 1){
      viewName = true;
      $(this).attr("data-tag", 2);
      $(this).text("隐藏区站名")
    }else{
      viewName = false;
      $(this).attr("data-tag", 1);
      $(this).text("显示区站名")
    }
    viewMarkers();
  })
  $("#loadingWin").on("tap click", function(){
    $(".pop").hide();
    hideLoading();
  })
  $("li.m12").on("tap click", function(){
    loadData();
  });
  $("li.m11").on("tap click", function(){
    if($(".pop:hidden").length==3){
      $(".pop").hide();
      $(".pop", $(this)).show(0, function(){
        showLoading();
        var pop = $(this);
        $("li", pop).off().on("tap click", function(){
          var cap = $(this).text();
          var type = $(this).attr("data-type");
          var tag = $(this).attr("data-tag");
          pop.prev().text(cap);
          hideLoading();
          if(type=='map'){
            if(tag.indexOf('Win')!=-1){
              $(".win").hide();
              $("#" + tag).show(0, function(){
                var fw = $(".tab:first").width();
                $(".cont").width(fw + 1);
                $(".cont td").width((fw+1) / 3);
                var wh = $(".win").height();
                $(".cont").height(wh - 77 - 40);
                Scrollbar.init(document.querySelector('.cont'));
              });
            }else{
              $(".win").hide();
            }
          }else if(type=='hour'){
            chooseHour = tag * 1;
            viewMarkers()
          }else if(type=='area'){
            currCity = tag;
            mapArea(tag);
            viewMarkers();
          }
        });
      });
    }else{
      $(".pop").hide();
    }
  });
});  
</script>
</body>
</html>